<template>
  <li class="cart_food_li">
    <div class="cart_list_num">
      <p class="ellipsis">{{title}}({{specs}})</p>
    </div>
    <div class="cart_list_price">
      <span class="food_price">¥{{price}}</span>
    </div>
    <div class="cart_list_control">
      <svg class="icon icon1" aria-hidden="true">
        <use xlink:href="#icon-jjian-"></use>
      </svg>
      <span class="Steppernumber">{{value}}</span>
      <svg class="icon" aria-hidden="true" @click="content(price,title,value)">
        <use xlink:href="#icon-jia-yuankuang"></use>
      </svg>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    // 食品价格
    price: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    // 食品数量
    value: {
      type: Number,
      default: 0
    },
    //规格名称
    specs: {
      type: String,
      default: ''
    }
  },
  methods: {
    //点击+号
    content(price, title, value) {
      // this.$store.commit('add', obj)
    }
  }
}
</script>

<style lang="less" scoped>
.cart_food_li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0.5rem;
  .ellipsis {
    font-size: 0.7rem;
    color: #666;
    font-weight: 700;
  }
}
.Steppernumber {
  margin: 0 0.3rem;
}
.cart_list_control {
  display: flex;
  align-items: center;
}
.icon {
  width: 0.77rem;
  height: 0.77rem;
  color: #3190e8;
}
.icon1 {
  width: 0.77rem;
  height: 0.77rem;
}
.cart_list_num {
  width: 55%;
}
</style>